<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css"></style>
</head>
<body>
    <h1>二级地址联动</h1>
    <hr>

    <select name="con" id="con"></select>
    <select name="city" id="city"></select>


    <script>
        // 声明 - 数据库获取
        // 国家信息
        var conList = ['中国','米国','腐国','岛国','二战国'];
        // 城市信息   二维数组
        var cityList = [
            ['北京','上海','武汉','重庆','天津','南京'],
            ['洛杉矶','纽约','芝加哥','旧金山','华盛顿'],
            ['伦敦','剑桥','爱丁堡','曼彻斯特','伯明翰'],
            ['东京','北海道','广岛','长崎','仁川','奈良','大阪'],
            ['柏林','汉堡','慕尼黑','法兰克福','科隆']
        ];

        var con = document.getElementById('con');
        var city = document.getElementById('city');

        // 填充第一个下拉框的内容
        for (var i = 0; i < conList.length; i++) {
            // con.innerHTML += '<option value="'+ i +'">'+conList[i]+'</option>';
            con.add(new Option(conList[i], i));
        }

        // 绑定onchange事件
        con.onchange = function (){
            // 先清空
            // city.innerHTML = '';
            city.options.length = 0;

            // 填充对应的内容
            // 根据value值,获取选择的option
            var index = con.value;
            // console.log(index);

            var citys = cityList[index];
            // console.log(citys);
            
            // 遍历数据到 第二个下拉框中
            for (var i = 0; i < citys.length; i++) {
                city.add(new Option(citys[i], i));
            }
        }

        // 手动触发事件
        con.onchange();


    </script>



</body>
</html>




